﻿@{
    Layout = null;
    ViewData["Title"] = "Login";

}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="~/layui/css/layui.css" rel="stylesheet" />
    <script src="~/layui/layui.js"></script>
    <style>
        .center {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <style>
        .demo-login-container {
            width: 500px;
            margin: 200px auto 0;
        }

        .demo-login-other .layui-icon {
            position: relative;
            display: inline-block;
            margin: 0 2px;
            top: 2px;
            font-size: 30px;
        }

        .layui-input {
            border-radius: 20px; /* 这里的 15px 可以根据你的需求调整 */
        }

        #particles-js {
            position: absolute;
            top: 0;
            width: 100%;
            z-index: -1;
            background: #aaa;
        }
    </style>
    <form class="layui-form">
        <div class="demo-login-container">
            <div>
                <h1 style="text-align:center;padding-bottom:20px">用户登录</h1>

                <div class="layui-form-item layui-col-md8">
                    <label class="layui-form-label" style="font-size: 12px;">用户名：</label>
                    <div class="layui-input-block">
                        <input style="width:400px" type="text" id="Account" lay-verify="required" autocomplete="off" placeholder="请输入用户名" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item layui-col-md8">
                    <label class="layui-form-label" style="font-size: 12px;">密码：</label>
                    <div class="layui-input-block">
                        <input style="width:400px" type="password" id="Password" lay-verify="required" placeholder="请输入密码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid layui-btn-radius" lay-submit lay-filter="demo-login" style="background:#16ba68;width:120px;margin-left:210px">登录</button>
                </div>
                <div class="layui-form-item demo-login-other">
                    <span style="padding-left:310px">
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #1e9fff;"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
                        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
                    </span>
                    或 <a href="#reg">注册帐号</a>
                </div>
            </div>
        </div>
    </form>

    <script>
        var $ = layui.$;
        var form = layui.form;
        var layer = layui.layer;

        // 提交事件
        form.on('submit(demo-login)', function () {
            var formData = {
                loginName: $("#Account").val(),
                passWord: $("#Password").val(),
            };

            // 发送Ajax请求
            $.ajax({
                //url: 'http://10.31.60.18:8000/AuthorizationPeopleGetRout/api/RegUserData/LoginDo',
                url: '/HttpClient/Login',
                type: 'Post',
                data: JSON.stringify(formData),
                contentType: 'application/json',
                success: function (res) {
                    // 请求成功的处理
                    if (res != null) {
                        window.localStorage.setItem("token", res.token);
                        location.href = '/Home/Index'
                        // 在这里可以根据后台返回的数据进行其他操作
                    } else {
                        alert('登录失败');
                    }
                },
                error: function () {
                    // 请求失败的处理
                    layer.msg('请求失败，请重试');
                }
            });
            // 阻止表单默认提交
            return false;
        });

    </script>

</body>
</html>


